<template>
	<view class="container">
		<view class="mainBox mainBox1">
			<view class="title">提现金额</view>
			<view class="inputBox flex">
				<view class="tit">¥</view>
				<input class="input flex-1" v-model="formData.refundAmount" type="digit" placeholder="请输入" :disabled="true" @input="inputAmount">
			</view>
			<!-- <view class="tips flex">
				<view class="num flex-1">可提现余额：{{$filters.formatPrice(balance)}}元</view>
				<view class="all yellow" @click="formData.refundAmount = $filters.formatPrice(balance)">全部提现</view>
			</view> -->
		</view>
		<view class="mainBox mainBox2">
			<view class="title">输入银行卡</view>
			<view class="list flex">
				<view class="tit">银行卡号</view>
				<input class="input flex-1" v-model="formData.payeeBankAccount" type="number" placeholder="请输入银行卡号">
			</view>
			<view class="list flex">
				<view class="tit">所属银行</view>
				<input class="input flex-1" v-model="formData.payeeBank" type="text" placeholder="请输入所属银行">
			</view>
			<view class="list flex">
				<view class="tit">所属支行</view>
				<cus-selects :data="selectList" v-model="formData.payeeBankBranch" @change="change" @inputChange="inputChange" :clearable='true' :filterable='true' :valueType="alias" placeholder="请输入所属支行"></cus-selects>
			</view>
			<view class="list flex">
				<view class="tit">收款人</view>
				<input class="input flex-1" v-model="formData.payeeName" type="text" placeholder="请输入收款人">
			</view>
			<view class="list flex">
				<view class="tit">收款手机号</view>
				<input class="input flex-1" v-model="formData.payeeMobile" type="tel" placeholder="请输入收款手机号" maxlength="11">
			</view>
		</view>
		<button class="btn-primary" @click="submit">确认提现</button>
	</view>
</template>

<script lang="ts" setup>
import { nextTick, reactive,ref } from "vue";
import { withdrawalSelf,bankListByName } from '@/common/API/finance'
import cusSelects from '@/components/cus-selects-fan/cus-selects-fan.vue'
import { onLoad } from "@dcloudio/uni-app"
import { checkPhone } from '@/utils/Foundation.js'
import { listBankCard,getFinanceAccount } from '@/common/API/bills'

const formData = reactive({
	refundAmount: null,
	payeeName: '',
	payeeMobile: '',
	payeeBankAccount: '',
	payeeBank: '',
	payeeBankBranch: '',
	payeeBankCode: '',
	payeeBankProvince: '',
	payeeBankCity: '',
})

const alias = ref({
    label:'bankName',
    value:'bankCode'
})
const selectList = ref([])

onLoad((options)=>{
	getBalanceInfo()
	getBankList()
})

// 获取卡包信息
const getBalanceInfo = async ()=>{
	let res = await getFinanceAccount({});
	formData.refundAmount = res.balance
}

// 获取银行卡信息
const getBankList = async ()=>{
	let bankList = await listBankCard({})
	if(bankList&&bankList.length){
		formData.payeeBankAccount = bankList[0].cardNo
		formData.payeeBank = bankList[0].bankName
		formData.payeeName = bankList[0].contactName
		formData.payeeMobile = bankList[0].contactPhone
	}
}

const inputAmount = (e)=>{
	nextTick(()=>{
		let value = e.detail.value
		if(value === '') {
			return false
		}
		const dotIndex = value.indexOf(".");
		const dotLastIndex = value.lastIndexOf(".");
		if (dotIndex !== dotLastIndex) {
			value = value.slice(0, dotLastIndex);
		}
		const pieces = value.split('.', 2)
		if(pieces.length === 2 && pieces[1].length > 2) {
			pieces[1] = pieces[1].substring(0, 2)
			formData.refundAmount = pieces.join('.')
		}
		formData.refundAmount = pieces.join('.')
	})
}

const change = (e)=> {
	let bankItem = selectList.value.filter(item => item.bankCode==e)
	if(bankItem.length){
		formData.payeeBankBranch = bankItem[0].bankName
		formData.payeeBankCode = bankItem[0].bankCode
		formData.payeeBankProvince = bankItem[0].bankProvince
		formData.payeeBankCity = bankItem[0].bankProvince
	}
}

const inputChange = async (e)=> {
	if(e){
		let res = await bankListByName({
			name: e
		})
		selectList.value = res
	}
	formData.payeeBankBranch = e
}

const submit = ()=>{
	if(!formData.refundAmount || formData.refundAmount<=0){
		uni.showToast({
			title: '暂无可提现金额',
			icon: 'none'
		})
	}else if(!formData.payeeBankAccount){
		uni.showToast({
			title: '请输入银行卡号',
			icon: 'none'
		})
	}else if(!formData.payeeBank){
		uni.showToast({
			title: '请输入所属银行',
			icon: 'none'
		})
	}else if(!formData.payeeBankBranch){
		uni.showToast({
			title: '请输入所属支行',
			icon: 'none'
		})
	}else if(!formData.payeeName){
		uni.showToast({
			title: '请输入收款人',
			icon: 'none'
		})
	}else if(!formData.payeeMobile){
		uni.showToast({
			title: '请输入收款手机号',
			icon: 'none'
		})
	}else if(!checkPhone(formData.payeeMobile)) {
		uni.showToast({
			title: '请输入正确的收款手机号',
			icon: 'none',
		});
		return false;
	}else{
		uni.showLoading({
			mask: true
		})
		withdrawalSelf(formData).then((res)=>{
			uni.hideLoading()
			uni.showToast({
				title: '提现申请成功'
			})
			uni.navigateBack()
		}).catch((err)=>{
			getBalanceInfo()
		})
	}
}

</script>

<style lang="scss" scoped>
.container{
	padding: 16rpx 32rpx 30rpx;
	overflow-y: scroll;
	.mainBox{
		background: #fff;
		border-radius: 8rpx;
		padding: 38rpx 32rpx;
		.title{
			font-size: 32rpx;
			height: 44rpx;
			line-height: 44rpx;
			margin: 0 0 28rpx;
		}
	}
	.mainBox1{
		.inputBox{
			border-bottom: 2rpx solid #dedede;
			padding: 10rpx 0 20rpx;
			.tit{
				font-size: 56rpx;
				font-weight: bold;
				margin-right: 22rpx;
				line-height: 80rpx;
			}
			.input,:deep(.uni-input-input){
				font-size: 38rpx;
				height: 80rpx;
				line-height: 80rpx;
			}
		}
		.tips{
			margin-top: 34rpx;
			.num{
				color: #999;
				font-size: 24rpx;
			}
		}
	}
	.mainBox2{
		margin: 16rpx 0 40rpx;
		.list{
			border-bottom: 2rpx solid #dedede;
			padding: 28rpx 0;
			&:last-child{
				border: none;
			}
			.tit{
				font-size: 30rpx;
				line-height: 42rpx;
				width: 200rpx;
				margin-right: 20rpx;
			}
			.input,:deep(.input),:deep(input){
				font-size: 30rpx;
				height: 42rpx;
				line-height: 42rpx;
			}
		}
	}
	.btn-primary{
		width: 686rpx;
		border-radius: 8rpx;
		font-size: 30rpx;
		// position: fixed;
		// bottom: 88rpx;
		// left: 32rpx;
	}
}
</style>
